<template>
  <div>
      <h1>类型断言,和vue3的ts写法</h1>
      <div id="box">
        盒子
      </div>
          <h1>{{name}}</h1>
          <h1>{{age}}</h1>
          <h1 v-for="item in list">{{item.price}}---{{item.color}}</h1>

      <button @click="toTurn">发送</button>
  </div>
</template>
<script setup lang="ts">
import {ref,defineProps,defineEmits} from 'vue'
// 类型断言,就是告诉编译器,我知道这个类型是什么,你不用再检查了
  let str:any;
  // 类型断言  
  //  1.  <类型>值
  // 2. 值 as 类型

  function fn<T,U>(value: T,age:U): T{
      // 类型断言 
      // 写法一
    console.log((<string>value).length)
      // 写法二
      // console.log((value as string).length)

      console.log((age as number[]).reverse())
    return value 
  }
  // console.log((<string>str).length)
  // console.log((str as string).length)
  // 获取元素 断言去标记
  // dom原生元素 HTMLElement
  // HTMLDivElement HTMLInputElement HTMLSpanElement
  // HTMLDivElement HTMLUlElement
  let box=document.getElementById("box") as HTMLDivElement;

  // function run (str:any){
  //   console.log((str as string).length)
  //   if(str as number[]){
  //     console.log(str.pop())
  //   }
  // }
  // run("sdf");
// vue3 
// ref 写法 reactive 写法
type Iperson={
  name:string,
  age:number
}
let obj=ref<Iperson>({name:"sdf",age:18})
 
// defineProps 

// let props=defineProps({
//   name:{
//     type:String,
//     default:"名字"
//   },
//   age:{
//     type:Number,
//     default:18
//   },
//   list:{
//     type:Array,
//     default(){
//       return []
//     }
//   }
// })
interface Icar{
   price:number,
   color:string
}
// ts的defineProps写法

// 没有默认值
// let props=defineProps<{
//    name:string,
//    age:number,
//    list:Array<Icar>
// }>()

//  并有默认值
let {name='小李',age=18,list=[]}=defineProps<{
   name:string,
   age:number,
   list:Array<Icar>
}>()

// vue3 deineEmits 的ts写法
// let emit=deineEmits(["sendName","sendId"])
let emits=defineEmits<{
  (e:"sendName",name:string):void,
  (e:"sendId",id:number):void
}>()


let toTurn=()=>{
  emits("sendName","老王")
   emits("sendId",1213)

}


 



</script>